<!--
 * @Description:
 * @Author: zhaolei
 * @Date: 2023-04-13 12:24:10
-->
<template>
  <el-dialog
    title="评论管理"
    :visible.sync="visible"
    width="80%"
    append-to-body
  >
    <avue-crud
      ref="crud"
      v-model="form"
      :page.sync="page"
      :data="tableData"
      :table-loading="tableLoading"
      :option="tableOption"
      @search-change="searchChange"
      @search-reset="searchReset"
    >
      <template
        slot="menu"
        slot-scope="scope"
      >
        <el-button
          v-if="scope.row.status === COMMENT_STATUS.NORMAL"
          type="text"
          size="small"
          @click="shield(scope.row, scope.index)"
        >
          屏蔽
        </el-button>
        <el-button
          v-else
          type="text"
          size="small"
          @click="recover(scope.row, scope.index)"
        >
          恢复
        </el-button>
      </template>
    </avue-crud>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex';
import crudMixins from '@/mixins/crud';
import { tableOption } from '@/const/crud/pet/commentList';
import { COMMENT_STATUS } from '@/const/type';
import {
  fetchPetFileComment,
  shieldComment,
  recoverComment,
} from '@/api/core/comment';
export default {
  name: 'commentPopup',
  mixins: [crudMixins],
  props: {
    id: {
      type: [Object, String],
    },
    value: {
      type: Boolean,
      default: false,
    },
    dataObj: { type: [Object] },
    petCode: {
      type: [String],
    },
  },
  data() {
    return {
      form: {},
      loading: false,
      tableOption: tableOption(),
      COMMENT_STATUS,
    };
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
    ...mapGetters(['userInfo', 'access_token']),
  },
  watch: {
    visible(val) {
      if (val) {
        this.$nextTick(() => {
          this.page.current = 1;
          this.page.currentPage = 1;
          this.getList();
        });
      }
    },
  },
  methods: {
    shield(row) {
      this.$confirm(
        '【屏蔽后该评论在移动用户端将不可见，是否确定屏蔽该评论？】',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(async () => {
        await shieldComment(row.code);
        this.$message.success('屏蔽成功');
        this.getList(this.page, true);
      });
    },
    recover(row) {
      this.$confirm(
        '【恢复后该评论在移动用户端将可见，是否确定恢复该评论？】',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(async () => {
        await recoverComment(row.code);
        this.$message.success('恢复成功');
        this.getList(this.page, true);
      });
    },
    // 列表查询
    getList(page, refresh) {
      if (refresh) {
        this.page.current = 1;
        this.page.currentPage = 1;
      }
      this.tableLoading = true;
      const timeObj = {};
      if (this.searchForm.createTime && this.searchForm.createTime.length) {
        timeObj.commentStartTime =
          this.searchForm.createTime[0].substr(0, 10) + ' 00:00:00';
        timeObj.commentEndTime =
          this.searchForm.createTime[1].substr(0, 10) + ' 23:59:59';
        // delete this.searchForm.createTime;
      }
      fetchPetFileComment(
        Object.assign(
          {
            current: this.page.currentPage,
            size: this.page.pageSize,
            relativeId: this.id,
          },
          this.searchForm,
          timeObj
        )
      )
        .then((response) => {
          this.tableData = response.data.data.records;
          this.page.total = response.data.data.total;
          this.tableLoading = false;
          this.tableData.forEach((el) => {
            el.relativeId = this.petCode;
          });
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped></style>
